---
import { getCollection } from "astro:content";
import { Image } from "@astrojs/image/components";
import Layout from "@layouts/Layout.astro";
import IconLink from "@components/IconLink.astro";
import getProjectImageSrc from "@images/utils";
import { getImage } from "astro/dist/assets/internal";
export async function getStaticPaths() {
    const renameEntries = await getCollection("projects");
    return renameEntries.map((entry) => ({
        params: { slug: entry.slug },
        props: { entry }
    }));
}
const { entry } = Astro.props;
const { Content } = await entry.render();

const src = await getProjectImageSrc(
    entry.data.links?.github ?? "Not Found",
    entry.data.image?.src
);

const og = {
    src,
    alt: entry.data.name
};
---

<Layout title={entry.data.name} description={entry.data.summary} keywords={entry.data.tags} og={og}>
    <header>
        <div class="img-container">
            <Image
                fit="inside"
                position="center"
                format="webp"
                background="#18232C"
                width={entry.data.image?.width ?? 474}
                height={entry.data.image?.height ?? 474}
                alt={entry.data.name}
                src={src}
            />
        </div>
        <hgroup>
            <h1>{entry.data.name}</h1>
            <h2>
                {entry.data.timespan.from}{
                    entry.data.timespan.to && <> - {entry.data.timespan.to}</>
                } •
                {entry.data.tags.join(" • ")}
            </h2>
        </hgroup>
        <div class="links">
            {
                entry.data.links?.github && (
                    <span>
                        <IconLink
                            icon="github"
                            size={25}
                            label="GitHub"
                            placement="bottom"
                            href={`https://github.com/${entry.data.links.github}`}
                        />
                    </span>
                )
            }
            {
                entry.data.links?.other &&
                    Object.keys(entry.data.links.other).map((k) => (
                        <span>
                            <IconLink
                                icon="link-45deg"
                                size={25}
                                href={entry.data.links.other[k]}
                                placement="bottom"
                                label={k}
                            />
                        </span>
                    ))
            }
        </div>
    </header>
    <Content />
</Layout>

<style>
    header > hgroup {
        margin-bottom: var(--spacing);
    }

    header > div.img-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    header {
        background-color: var(--card-sectionning-background-color);
        padding: var(--spacing);
        border-radius: 5px;
        margin-bottom: calc(var(--spacing) * 5) !important;
        text-align: center;
    }

    .links {
        display: flex;
        align-content: center;
        justify-content: center;
        gap: var(--spacing);
    }

    .links > span {
        display: flex;
        align-items: center;
    }
</style>